<?php
/**
 * Template Name: Pitch Search
 */

get_header(); ?>

<div class="container">
    <div style="float:right;margin-right: 343px;">
        <select id="">
            <option>Sort By Popularity</option>
            <option>Sort By Price</option>
            <option>Sort By Distance</option>
        </select>
    </div>
    <h1><?php the_title() ?></h1>

    <div class="row-fluid">
        <div class="span8">
            <div id="render-area">

                <?php
                query_posts(array(
                    'post_type' => 'pitches',
                    'showposts' => 10
                ));
                $resultCount = 0;
                while (have_posts()) : the_post(); ?>

                <div class="card grey search-result clearfix" data-result-id="<? echo $resultCount++ ?>">


                    <h3><a href="<?php the_permalink() ?>" class="result-title">
                        <? echo get_relation_data('venue','name'); ?>
                        (<?php the_field('pid'); ?>)
                    </a>

                        <span style="float:right; font-size:12px;">
                            <? echo get_relation_data('venue','address'); ?>
                        </span>
                    </h3>




                    <a href="<?php the_permalink() ?>">
                    <?php $image = wp_get_attachment_image_src(get_field('image_1'), 'pitch-main');
                    if (get_field('image_1')) { ?>
                        <img style="margin:0 15px 15px 0; width:300px; float:left; border-radius:3px;" src="<?php echo $image[0]; ?>"
                             alt="<?php echo get_the_title(get_field('image_1')) ?>"/>
                        <?php } else { ?>
                        <img style="margin:0 15px 15px 0; width:300px; float:left; border-radius:3px;"
                             src="http://pitchwise.co.uk/wp-content/uploads/2012/11/PitchWise-Logo-658x300.png"
                             alt="<?php echo get_field('pid') ?>"/>
                        <?php }?>
                        </a>

                    <table class="table table-striped table-condensed table-bordered" style="width:300px">
                        <tbody>
                        <tr>
                            <th>Size</th>
                            <td><?php the_field('size'); ?> </td>
                        </tr>
                        <tr>
                            <th>Surface</th>
                            <td><?php the_field('surface'); ?> </td>
                        </tr>
                        <tr>
                            <th>Floodlit</th>
                            <td><?php the_field('floodlit'); ?> </td>
                        </tr>
                        <tr>
                            <th>Indoor</th>
                            <td><?php the_field('indoor'); ?> </td>
                        </tr>
                        </tbody>
                    </table>

                    <h3 style="text-align: right;clear: both;">
                        From
                        <?
                        $currentID = get_the_ID();
                        $lowestPrice = 500;
                        $post_query = new WP_Query(array('post_type' => 'slots', 'showposts' => 100));

                        while ($post_query->have_posts()) : $post_query->the_post();
                            //$array = $post_query->post->ID;

                            $tempPitch = get_field('pitch', $post_query->post->ID);
                            if ($tempPitch[0]->ID == $currentID) {
                                if (get_field('price', $post_query->post->ID) < $lowestPrice) {
                                    $lowestPrice = get_field('price', $post_query->post->ID);
                                }
                            }
                        endwhile;
                        wp_reset_postdata();
                        if ($lowestPrice != 500) {
                            echo '&pound;'.$lowestPrice.' <strike style="color:#333;font-weight:400;">£'.$lowestPrice * 1.20.'</strike>';
                        } else {
                            echo 'N/A';
                        }

                        ?>
                        <a href="<?php the_permalink() ?>" class="btn btn-primary pull-left" style="margin-right:10px;clear:both">More Details &raquo;</a>
                        <a class="btn pull-left" style="margin-right:10px">Book now &raquo;</a>
                    </h3>
                </div>

                <?php endwhile;?>

            </div>
        </div>
        <div class="span4">
            <div class="card grey">
                <h2 class="title">Refine Search</h2>

                <form id="refine-search" style="margin:0;">
                    <fieldset>
                        <label>Name \ Location</label>
                        <input id="refine-name" type="text" placeholder="Search">
                        
                    </fieldset>
                    <fieldset>
                        <label>Date</label>
                        <select id="refine-date">
                            <?
                            for ($a = 0; $a <= 12; $a++) {
                                $currentDay = "<option value='" . date("Ymd-l", strtotime("+" . $a . " days")) . "'>";
                                $currentDay .= date("l - d/m/y", strtotime("+" . $a . " days"));
                                $currentDay .= "</option>";
                                echo $currentDay;
                            }
                            ?>
                        </select>

                    </fieldset>


                    <fieldset>
                        <div style="width:136px;display:inline-block">
                            <label>Max Price</label>
                            <div class="input-prepend">
                                <span class="add-on">£</span>
                                <input id="refine-max-price" class="span5" type="number" value="100">
                            </div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <label>Size</label>
                        <select id="refine-size">
                            <option value="">Any</option>
                            <option>11 A Side</option>
                            <option>8 A Side</option>
                            <option>7 A Side</option>
                            <option>5 A Side</option>
                        </select>

                    </fieldset>
                    <fieldset>
                        <div style="width:136px;display:inline-block">
                            <label>Min Width</label>
                            <div class="input-append">
                                <input id="refine-min-width" class="span5" type="number" placeholder="0">
                                <span class="add-on">m</span>
                            </div>
                        </div>
                        <div style="width:136px;display:inline-block">
                            <label>Max Width</label>
                            <div class="input-append">
                                <input id="refine-max-width" class="span5" type="number" placeholder="100">
                                <span class="add-on">m</span>
                            </div>
                        </div>
                        
                    </fieldset>
                    <fieldset>
                        <div style="width:136px;display:inline-block">
                            <label>Min Length</label>
                            <div class="input-append">
                                <input id="refine-min-length" class="span5" type="number" placeholder="0">
                                <span class="add-on">m</span>
                            </div>
                        </div>
                        <div style="width:136px;display:inline-block">
                            <label>Max Length</label>
                            <div class="input-append">
                                <input id="refine-max-length" class="span5" type="number" placeholder="100">
                                <span class="add-on">m</span>
                            </div>
                        </div>
                        
                    </fieldset>
                    <fieldset>
                        <label>Surface</label>
                        <select id="refine-surface">
                            <option value="">Any</option>
                            <option>Grass</option>
                            <option>Astro Turf</option>
                            <option>2G</option>
                            <option>3G</option>
                            <option>4G</option>
                            <option>5G</option>
                        </select>
                        
                    </fieldset>
                    <fieldset>
                        <label>Floodlit</label>
                        <select id="refine-floodlit">
                            <option value="">Any</option>
                            <option>Yes</option>
                            <option>No</option>
                        </select>
                        
                    </fieldset>
                    <fieldset>
                        <label>Goal Size</label>
                        <select id="refine-goal-size">
                            <option value="">Any</option>
                            <option>Junior</option>
                            <option>Senior</option>
                        </select>
                        
                    </fieldset>
                    <fieldset>
                        <label>Indoor</label>
                        <select id="refine-indoor">
                            <option value="">Any</option>
                            <option>Yes</option>
                            <option>No</option>
                        </select>
                        
                    </fieldset>
                    <fieldset>
                        <label>Nets</label>
                        <select id="refine-nets">
                            <option value="">Any</option>
                            <option>Included</option>
                            <option>Not Included</option>
                        </select>
                        
                    </fieldset>
                    <fieldset>
                        <label>Parking</label>
                        <select id="refine-parking">
                            <option value="">Any</option>
                            <option>Available</option>
                            <option>No</option>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label>Changing Rooms</label>
                        <select id="refine-changing-rooms">
                            <option value="">Any</option>
                            <option>Yes</option>
                            <option>No</option>
                        </select>
                    </fieldset>
                    <fieldset>
                        <label>Showers</label>
                        <select id="refine-showers">
                            <option value="">Any</option>
                            <option>Yes</option>
                            <option>No</option>
                        </select>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<?php get_footer(); ?>

<script src="<?php echo get_template_directory_uri(); ?>/js/PITCHWISE.pitchSearch.js"></script>

<script>
    var results = [];

    <?php
    query_posts(array(
        'post_type' => 'pitches',
        'showposts' => 10
    ));

    while (have_posts()) : the_post(); ?>
        <?php $image = wp_get_attachment_image_src(get_field('image_1'), 'pitch-main'); ?>

        <?
        $currentID = get_the_ID();
        $lowestPrice = 99;
        $post_query = new WP_Query(array('post_type' => 'slots', 'showposts' => 100));

        while ($post_query->have_posts()) : $post_query->the_post();
            $tempPitch = get_field('pitch', $post_query->post->ID);
            if ($tempPitch[0]->ID == $currentID) {
                if (get_field('price', $post_query->post->ID) < $lowestPrice) {
                    $lowestPrice = get_field('price', $post_query->post->ID);
                }
            }
        endwhile;
        wp_reset_postdata();
        ?>

    results.push({
        'name':'<? echo get_relation_data('venue', 'name'); ?> (<?php the_field("pid"); ?>)',
        'price':'<? echo $lowestPrice ?>',
        'address':'<? echo get_relation_data('venue', 'address'); ?>',
        'area':'<? echo get_relation_data('venue', 'area'); ?>',
        'city':'<? echo get_relation_data('venue', 'city'); ?>',
        'postCode':'<? echo get_relation_data('venue', 'post_code'); ?>',
        'image':'<?php echo $image[0]; ?>',
        'size':'<?php the_field('size'); ?>',
        'width':'<?php the_field('width'); ?>',
        'length':'<?php the_field('length'); ?>',
        'surface':'<?php the_field('surface'); ?>',
        'floodlit':'<?php the_field('floodlit'); ?>',
        'goalSize':'<?php the_field('goal_size'); ?>',
        'indoor':'<?php the_field('indoor'); ?>',
        'nets':'<?php the_field('nets'); ?>',
        'parking':'<?php the_field('parking'); ?>',
        'changingRooms':'<? echo get_relation_data('venue', 'changing_rooms'); ?>',
        'showers':'<? echo get_relation_data('venue', 'showers'); ?>',
        'nearest':'<? echo get_relation_data('venue', 'nearest_station'); ?>'
    });

        <?
    endwhile;?>

    $(function () {
        var options = {
            results:results
        };

        var pitchSearch = new PITCHWISE.pitchSearch(options);
    });

</script>

